<title>课程管理</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a><cite>课程管理</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">课程列表</div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="course-table-page" lay-filter="course-page"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="lineBar">
    <a class="layui-btn layui-btn-xs" lay-event="experiment_list">实验列表</a>
</script>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addCourse">申请新课程</button>
    </div>
</script>

<script>
    layui.use(['jquery', 'table'], function(){
        var $ = layui.$, form = layui.form,
            table = layui.table, admin = layui.admin,
            view = layui.view;
        var width = window.screen.availWidth > 600 ? 600 : window.screen.availWidth;
        var tablelns = table.render({
            elem: '#course-table-page'
            ,url: "/student/course"
            ,method: 'get'
            ,cols: [[
                {field:'course_id', width:'10%',  title: '课程ID', align: 'center'}
                ,{field:'courseName', width:'15%', title:'课程名', align:'center'}
                ,{field:'createdTime', width:'15%', title: '创建时间', align: 'center', templet: function (d) {
                        return time(d.createdTime);
                    }}
                ,{field:'description', width:'30%', title:'课程描述', align:'center'}
                ,{field:'teacher_name', width:'15%', title:'教师', align:'center'}
                ,{align:'center', width:'15%', title:'操作', toolbar:'#lineBar'}
            ]]
            ,page: true
            ,parseData: function(res) {
                return {
                    "status": res.status,
                    "message": res.message,
                    "total": res.data.total,
                    "list": res.data.content
                };
            }
            ,response: {
                statusName: 'status'
                ,statusCode: 200
                ,msgName: 'message'
                ,countName: 'total'
                ,dataName: 'list'
            }
            ,toolbar: '#toolbar'
        });
        table.on('tool(course-page)', function (obj) {
            switch (obj.event) {
                case 'experiment_list':
                    layui.data('i_container', {
                        key: 'experiment_course_id'
                        ,value: obj.data.course_id
                    });
                    location.hash = "/menu/experiment/experimentList"
                    break;
            }
        });

        table.on('toolbar(course-page)', function (obj) {
            switch (obj.event) {
                case 'addCourse':
                    admin.popup({
                        title: "添加课程",
                        area: [width + "px", "450px"],
                        id: "LAY-popup-user-edit",
                        success: function(layero, index) {
                            view(this.id).render("menu/course/add_course").done(function() {
                                form.on("submit(LAY-user-back-submit)", function(data) {
                                    let field = data.field;

                                    let load = layer.load(2);
                                    let postData = {
                                        courseID: parseInt(field.courseID)
                                    };
                                    $.ajax({
                                        url:        '/student/course',
                                        data:       postData,
                                        type:       'POST',
                                        complete    :function (result) {
                                            layer.close(load);
                                            result = result.responseJSON;
                                            showMsg(result.message);
                                        }
                                    })

                                })
                            })
                        },
                        end: function () {
                            layui.index.render();
                        }
                    });
                    break;
            }
        });
    });

    function time(time = +new Date()) {
        var date = new Date(time + 8 * 3600 * 1000); // 增加8小时
        return date.toJSON().substr(0, 19).replace('T', ' ');
    }

    //显示结果
    function showMsg(text) {
        layer.msg("<div style=\"padding: 20px 100px;\">"+ text + "</div>", {
            time: 8000, //8s后自动关闭
            btn: ['明白了'],
            shade: 0.3,
            yes: function (index, layero) {
                layer.close(index);
            }
        });
    }
</script>